<template>
  <div>
    <div class="top">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入小区或地址"
      >
      <template #left>
          <van-icon name="arrow-left" class="iconcommon" @click="$router.back()" />
      </template>
      <template #action>
          <van-icon name="location-o" class="iconcommon" arrowdown/>
      </template>

      <template #label>
        <div class="container">
          <span>{{$store.state.cityname.label}}</span>
          <van-icon class="arrowdown" name="arrow-down" />
        </div>
      </template>
      </van-search>
    </div>
      <!-- <button @click="appear=true">按钮</button>
      <button @click="isrent=true">租金</button>
      <button @click="isarea=true">方式</button> -->
    <!-- 标题 -->
    <!-- <van-overlay :show="show" @click="show = false;appear=false" /> -->

<div class="titlearea" :class="{select:showtitle}" >
    <div class="item "  :class="{green:light===0||value1}" @click.stop="click1">区域 <i class="toutiao toutiao-xiala"></i></div>
    <div class="item" :class="{green:light===1||value2}" @click.stop="click2">方式 <i class="toutiao toutiao-xiala"></i></div>
    <div class="item"  :class="{green:light===2||value3}" @click.stop="click3" >租金 <i class="toutiao toutiao-xiala"></i></div>
    <div class="item" :class="{green:light===3||value4}" @click.stop="click4">筛选 <i class="toutiao toutiao-xiala"></i></div>
  </div>

<van-popup    :duration="0"  v-model="appear" position="top" :style="{top:'90px'}" >
    <van-picker show-toolbar toolbar-position="bottom"  @confirm="onConfirm"
  @cancel="onCancel"  :columns="columns1" v-if="appear" >
      <template #columns-bottom>
             <div style="display:flex">
      <!-- <van-button  style="flex:1" plain type="primary">取消</van-button>
      <van-button style="flex:2" type="primary">确定</van-button> -->
        </div>
      </template>
    </van-picker>
</van-popup>

  <!-- 方式弹出层 -->
  <van-popup :duration="0"   v-model="isarea" position="top" :style="{top:'90px'}" >
    <div v-if="isarea">
      <van-picker
      show-toolbar toolbar-position="bottom"
    :columns="rentType"
    @confirm="onConfirm1"
    @cancel="onCancel"
    >
    </van-picker>

    </div>
  </van-popup>
  <!-- 租金弹出层 -->
  <van-popup :duration="0"   v-model="isrent" position="top" :style="{top:'90px'}" >
    <div v-if="isrent">
      <van-picker
      show-toolbar toolbar-position="bottom"
      @confirm="onConfirm2"
      @cancel="onCancel"
      :columns="price"
    />
    </div>
  </van-popup>
  <!-- 右侧弹出层 -->
  <van-popup :duration="0"    @confirm="onConfirm3"
  @cancel="onCancel" v-model="isfilter" position="right" :style="{ width: '78%' ,height:'100%'}" >
    <pop-left-item v-if="isfilter" @close="isfilter=false" :id="id" :value2="value2"  :value3="value3"  @submitdata="getsubmite" />
  </van-popup>
  <card-list v-for="obj in listcard" :key="obj.houseCode" :obj="obj" />
  </div>
</template>

<script>
import { getcitydetails, filterhouses } from '@/api/hotel'
import PopLeftItem from './components/PopLeftItem.vue'
import CardList from '../../components/CardList.vue'
export default {
  components: { PopLeftItem, CardList },
  data () {
    return {
      showtitle: false,
      isrent: false,
      appear: false,
      show: true,
      light: 2,
      columns1: [
        {
          text: '区域',
          children: [

          ]
        },
        {
          text: '地铁',
          children: []
        }
      ],
      value: '',
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      columns2: ['不限', '整租', '合租'],
      columns3: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      list: [],
      list2: [],
      array: [],
      isarea: false,
      isfilter: false,
      price: [],
      rentType: [],
      value1: null,
      value2: null,
      value3: null,
      value4: null,
      isfilterarea: [],
      isfiltersubway: [],
      xixixi: [],
      id: null,
      listcard: []
    }
  },

  created () {
    this.getdetails()
    this.loadhouses()
  },

  methods: {
    async  getdetails () {
      const res = await getcitydetails(this.$store.state.cityname.value)
      console.log(res)
      this.isfilterarea = res.data.body.area
      this.isfiltersubway = res.data.body.subway
      this.price = res.data.body.price.map(item => item.label)
      this.rentType = res.data.body.rentType.map(item => item.label)

      res.data.body.area.children.forEach((item, index) => {
        this.columns1[0].children.push({
          text: item.label,
          children: []
        })

        if (item.children) {
          item.children.forEach(item1 => {
            this.columns1[0].children[index].children.push({
              text: item1.label
            })
          })
        } else {
          this.columns1[0].children[0].children.push({
            text: ''
          })
        }
      })
      // console.log(this.columns1)
      res.data.body.subway.children.forEach((item, index) => {
        this.columns1[1].children.push({
          text: item.label,
          children: []
        })

        if (item.children) {
          item.children.forEach(item1 => {
            this.columns1[1].children[index].children.push({
              text: item1.label
            })
          })
        } else {
          this.columns1[1].children[0].children.push({
            text: ''
          })
        }
      })
      // console.log(this.columns1)
    },
    onConfirm (value) {
      console.log(value)
      const bool = value.some(item => item === '不限')
      if (bool) {
        return alert('请选择正确的区域')
      }
      this.appear = false
      this.value1 = value
      const label = this.value1[this.value1.length - 1]
      this.isfilterarea.children.forEach((item, index) => {
        if (item.children) {
          this.xixixi = item.children.find(item1 => item1.label === label)
          if (this.xixixi) {
            this.id = this.xixixi.value
          }
        }
      })
      this.isfiltersubway.children.forEach((item, index) => {
        if (item.children) {
          this.xixixi = item.children.find(item1 => item1.label === label)
          if (this.xixixi) {
            this.id = this.xixixi.value
          }
        }
      })
      this.loadhouses()

      // this.value = value
      // this.showPicker = false
    },
    onConfirm1 (value) {
      // console.log(value)
      this.isarea = false
      this.value2 = value
      console.log(this.value2)
      this.loadhouses()
      // this.value = value
      // this.showPicker = false
    },

    onConfirm2 (value) {
      // console.log(value)
      this.isrent = false
      this.value3 = value
      console.log(this.value3)
      this.loadhouses()
      // this.value = value
      // this.showPicker = false
    },

    onConfirm3 (value) {
      // console.log(value)
      this.isfilter = false
      this.value4 = value
      this.loadhouses()
      // this.value = value
      // this.showPicker = false
    },
    onCancel () {
      this.showtitle = false
      this.isrent = false
      this.isarea = false
      this.isfilter = false
      this.appear = false
    },
    click1 () {
      this.light = 0
      this.showtitle = false
      this.isrent = false
      this.isarea = false
      this.isfilter = false
      this.appear = true
    },
    click2 () {
      this.light = 1
      this.showtitle = false
      this.appear = false
      this.isrent = false
      this.isfilter = false
      this.isarea = true
    },
    click3 () {
      this.light = 2
      this.showtitle = false
      this.appear = false
      this.isarea = false
      this.isfilter = false
      this.isrent = true
    },
    click4 () {
      this.light = 3
      this.showtitle = true
      this.appear = false
      this.isarea = false
      this.isfilter = true
      this.isrent = false
    },
    getsubmite (val) {
      this.value4 = val
    },
    async loadhouses () {
      const res = await filterhouses(
        {
          cityId: this.$store.state.cityname.value,
          start: 1,
          end: 20,
          area: this.id,
          rentType: this.val2,
          price: this.value3,
          more: this.value4
        }
      )
      console.log(res)
      this.listcard = res.data.body.list
    }
  }
}
</script>

<style scoped lang='less'>
.titlearea{
  // left: 0;
  top: 0;
position:sticky;z-index:2222;background:#fff
}
.select{
  position: unset;
}
.middle {
  position: relative;
  z-index: 10000;
}
.green {
  color: #21b97a;
}
.titlearea {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  .item{
    // background-color: pink;
    flex: 1;
    text-align: center;
  }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
  }

.van-search {
  padding: 0;
  background-color: transparent;
}
.top{
  padding: 10px 10px;
  background-color: #21b97a;
  height: 50px;
  // margin-bottom: 80px;
  box-sizing: border-box;
}
.iconcommon {
  color: #fff;
  font-size: 25px;
  margin-top: 2px;
}
// 搜索样式
.van-search__content{
  margin-left: 15px;
  padding-left: 0;
  .van-search__label {
    position: relative;
    margin-right: 15px;
    .arrowdown {
      margin-left: 5px;
      font-size: 12px;
    }

  }
  .van-search__label::after {
    content: '';
    position: absolute;
    top: 7px;
    right: -7px;
    height: 20px;

    width: 1px;
    // border: 1px solid #ccc;
    background-color:#ccc;
  }
}
</style>
